import React from 'react';
import { Play, Clock, Eye } from 'lucide-react';
import API_CONFIG from '../utils/apiConfig';

const VideoGrid = ({ videos, onVideoClick }) => {
  return (
    <div className="video-grid">
      {videos.map(video => (
        <div 
          key={video.id} 
          className="video-card"
          onClick={() => onVideoClick(video)}
        >
          <div className="video-thumbnail">
            <img src={`${API_CONFIG.getURL('images')}/${video.filename.replace('mp4', 'jpg')}`} alt={video.title} />
            <div className="video-overlay">
              <Play className="play-icon" />
            </div>
            <div className="video-duration">
              <Clock className="duration-icon" />
              {video.duration_seconds}
            </div>
          </div>
          
          <div className="video-info">
            <h3 className="video-title">{video.point_name}通道{video.channel_number}</h3>
              <div className="video-stats">
              <span className="video-views">
                <Eye className="views-icon" />
                {video.object_labels.join('、')} 
              </span>
              <span className="video-date">{video.start_time}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default VideoGrid;